 <%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CMS首页</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/resource/js/bootstrap.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath }/resource/css/bootstrap.css">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resource/css/index.css">
</head>
<body>
	<!-- 定义一个大的模块 -->
	<div class="container">
		<!-- 上方展示区 -->
		<div>
			<!-- logo -->
			<a href="${pageContext.request.contextPath }/"> <img alt="" src="${pageContext.request.contextPath }/resource/pic/logo-admin.jpg"
				height="50" width="100">
			</a>
			<div class="float-right align-items-center">
				<!-- 未登录 -->
				<c:if test="${LOGIN_USER==null }">
					<input class="btn btn-primary btn-sm" type="button" value="登录"
						onclick="toLogin()">
					<input class="btn btn-primary btn-sm" type="button" value="注册"
						onclick="toRegister()">
				</c:if>
				<!-- 已登录 -->
				<c:if test="${LOGIN_USER!=null }">
                           	您好，<b>${LOGIN_USER.nickname }</b>
					<input class="btn btn-primary btn-sm" type="button"
						value="${LOGIN_USER.role==0?'个人中心':'管理员中心'  }"
						onclick="toCenter()">
					<input class="btn btn-primary btn-sm" type="button" value="退出"
						onclick="logout()">
				</c:if>
			</div>
		</div>
		<!-- todo 中间展示区 -->
		<div class="row">
			<!-- 左侧导航 -->
			<div class="col-md-2 channel">
				<ul>
					<!-- 栏目导航 -->
					<!-- 热点 -->
					<li><a href="${pageContext.request.contextPath }/"
						class="channel-item  ${article.channelId==null?'active':'' }">热点</a></li>

					<!-- 栏目数据(频道表) -->
					<c:forEach items="${channels }" var="channel">
						<li><a href="${pageContext.request.contextPath }/?channelId=${channel.id }"
							class="channel-item  ${article.channelId==channel.id?'active':'' }">${channel.name  }</a></li>
					</c:forEach>
				</ul>
			</div>

			<!-- 中间页面展示 -->
			<div class="col-md-7">
				<!-- 栏目频道数据展示 -->
				<c:if test="${article.channelId != null }">

					<div class="subchannel row">
						<ul>
							<!-- 展示全部数据 -->
							<a href="${pageContext.request.contextPath }/?channelId=${article.channelId }"
								class="sub-item  ${article.categoryId==null?'sub-selected':'' }">全部</a>
							<!-- 所有类别数据的展示 -->
							<c:forEach items="${categories }" var="category">
								<a
									href="${pageContext.request.contextPath }/?channelId=${article.channelId  }&categoryId=${category.id}"
									class="sub-item  ${article.categoryId==category.id?'sub-selected':''  }">${category.name }</a>
							</c:forEach>
						</ul>
					</div>

				</c:if>

				<!-- 热点数据展示 -->
				<!-- 轮播图 -->
				<c:if test="${article.channelId == null }">
					<div>
						<div id="carouselExampleCaptions" class="carousel slide"
							data-ride="carousel">
							<ol class="carousel-indicators">
								<!-- 用于计算轮播图的个数 -->
								<c:forEach items="${slides  }" var="slide" varStatus="i">
									<li data-target="#carouselExampleCaptions" data-slide-
										to="${i.index  }" class="${i.index==0?'active':'' }"></li>
								</c:forEach>
							</ol>
							<div class="carousel-inner">

								<!-- 用于展示轮播图图片 -->
								<c:forEach items="${slides  }" var="slide" varStatus="i">

									<div class="carousel-item ${i.index==0?'active':'' }">
										<img src="${slide.picture }" class="d-block w-100" alt="..."
											width="600" height="400">
										<div class="carousel-caption d-none d-md-block">
											<h5>${slide.title  }</h5>
										</div>
									</div>

								</c:forEach>
							</div>
							<a class="carousel-control-prev" href="#carouselExampleCaptions"
								role="button" data-slide="prev"> <span
								class="carousel-control-prev-icon" aria-hidden="true"></span> <span
								class="sr-only">上一个</span>
							</a> <a class="carousel-control-next" href="#carouselExampleCaptions"
								role="button" data-slide="next"> <span
								class="carousel-control-next-icon" aria-hidden="true"></span> <span
								class="sr-only">下一个</span>
							</a>
						</div>
					</div>
				</c:if>
				<hr>

				<!-- 文章数据(可以是热点、根据频道/频道分类查询的数据) -->
				<div>
					<c:forEach items="${info.list }" var="article">

						<!-- 将图片和文字写到一行 -->
						<div class="row">
							<!-- 文章标题图片展示  -->
							<div class="col-md-2">
								<!-- 文章详情的链接 -->
								<a href="detail?articleId=${article.id }"> <img alt=""
									src="${article.picture }" width="100" height="100">
								</a>
							</div>

							<!-- 文章标题和信息的展示 -->
							<div class="col-md-10">
								<!-- 文章详情的链接 -->
								<a href="${pageContext.request.contextPath }/detail?articleId=${article.id }">
									<div class="title-box">${article.title }</div>
									${article.userName }·${article.hits }点击·${article.displayTime }
								</a>
							</div>
						</div>
						<hr>
					</c:forEach>
				</div>
				<jsp:include page="/WEB-INF/view/common/pages.jsp"></jsp:include>
			</div>

			<!-- 右侧展示区 -->
			<div class="col-md-3">
				<!-- 24小时热文 -->
				<div class="card" style="width: 18rem;">
					<div class="card-header title-box">24小时热文</div>
					<ul class="list-group list-group-flush">
						<c:forEach items="${info24Hot.list }" var="article">
							<li class="list-group-item"><a
								href="${pageContext.request.contextPath }/detail?articleId=${article.id }">${article.title }</a></li>
						</c:forEach>
						<li></li>
					</ul>

				</div>
				<!-- 点击量排行榜 -->
				<div class="card" style="width: 18rem;">
					<div class="card-header title-box">点击量排行榜</div>
					<ul class="list-group list-group-flush">
						<c:forEach items="${infoHits.list }" var="article">
							<li class="list-group-item"><a
								href="detail?articleId=${article.id }">${article.title }</a></li>
						</c:forEach>
					</ul>
				</div>
			</div>
		</div>
		<!-- todo下方展示区 -->
		<!-- 友情链接 -->
		<hr>
		<div class="text-center">
			友情链接：
			<c:forEach items="${links }" var="l">
				<a href="${l.url }">${l.text }</a>
			</c:forEach>
		</div>
	</div>

</body>
<script type="text/javascript">
	// 跳转到注册页面
	function toRegister() {
		location = "${pageContext.request.contextPath }/user/toRegister"
	}
	
	// 跳转到登录页面
	function toLogin() {
		location = "${pageContext.request.contextPath }/user/toLogin"
	}
	
	// 注销
	function logout() {
		location = "${pageContext.request.contextPath }/user/logout"
	}
	
	//分页参数
    function goPage(pageNum){
          location="${pageContext.request.contextPath }/index?pageNum="+pageNum  +"&channelId="+'${article.channelId}'+"&categoryId="+'${article.categoryId}';
    }
	
	
    // 去个人中心：function函数
    function toCenter(){
          //获取角色role值
          var role = '${LOGIN_USER.role}';

          //判断role值
          if(role == 0){
               //普通用户
               location="${pageContext.request.contextPath }/my/";
          }else{
               //超级管理员
               location="${pageContext.request.contextPath }/admin/";
          }
    }
</script>

</html>